<template>
	<jf-navigation>
		<view>{{$t('index.setting.privacy.navigation')}}</view>
	</jf-navigation>
	
	<view class="privacy_item">
		<view class="privacy_item_label">{{$t('index.setting.privacy.attention')}}</view>
		<view class="privacy_item_btn" :class="{'active': form.hidden_sub === 0}" @click="change('hidden_sub')"></view>
	</view>
	
	<view class="privacy_item">
		<view class="privacy_item_label">{{$t('index.setting.privacy.fans')}}</view>
		<view class="privacy_item_btn" :class="{'active': form.hidden_fans === 0}" @click="change('hidden_fans')"></view>
	</view>
	
	<view class="privacy_item">
		<view class="privacy_item_label">{{$t('index.setting.privacy.issue')}}</view>
		<view class="privacy_item_btn" :class="{'active': form.hidden_pub === 0}" @click="change('hidden_pub')"></view>
	</view>
	
	<view class="privacy_item">
		<view class="privacy_item_label">{{$t('index.setting.privacy.collect')}}</view>
		<view class="privacy_item_btn" :class="{'active': form.hidden_collect === 0}" @click="change('hidden_collect')"></view>
	</view>
	
	<view class="privacy_item">
		<view class="privacy_item_label">{{$t('index.setting.privacy.star')}}</view>
		<view class="privacy_item_btn" :class="{'active': form.hidden_star === 0}" @click="change('hidden_star')"></view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from 'vue';
	import { useStore } from "@/store/main"
	import { saveUserinfo } from "@/api/login"
	
	const store = useStore()
	const form = reactive({
		loading: false,
		hidden_sub: store.getUserinfo.hidden_sub,
		hidden_fans: store.getUserinfo.hidden_fans,
		hidden_collect: store.getUserinfo.hidden_collect,
		hidden_star: store.getUserinfo.hidden_star,
		hidden_pub: store.getUserinfo.hidden_pub
	})
	
	const change = ( key: string ):void => {
		if(form.loading) return
		form[key] = form[key] === 0 ? 1 : 0
		form.loading = true
		saveUserinfo(form).then(() => {
			form.loading = false
			store.setUserinfo(form)
		}).catch(() => {
			form.loading = false
			form[key] = form[key] === 0 ? 1 : 0
		})
	}
</script>

<style lang="scss">
	.privacy_item{
		@include layout(row, center, space-between);
		width: 100vw;
		padding: 28rpx 32rpx;
		border-bottom: 2rpx solid #F2F4F6;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 36rpx;
		box-sizing: border-box;
		.privacy_item_btn{
			position: relative;
			width: 96rpx;
			height: 48rpx;
			background: #EBEEF1;
			border-radius: 24rpx;
			&::before{
				position: absolute;
				content: "";
				width: 40rpx;
				height: 40rpx;
				border-radius: 20rpx;
				background: #ffffff;
				margin-top: 4rpx;
				margin-left: 4rpx;
			}
			&.active{
				background: #326AFF;
				&::before{
					margin-left: 52rpx;
				}
			}
		}
	}
</style>